<template>
  <div class="pie" ref="pie"></div>
</template>

<script>
export default {
  // props: ['stu'],
  props: {
    stu: {
      // 官方文档约定：default默认值，如果是数组或对象格式，必须写成函数，函数中返回数组或对象
      // default: () => ({}),
      default: () => [],
      required: true, // 加入required表示必须给我传递这个值
      type: Array // 必须给我传递数组格式
    }
  },
  data() {
    return {
      pie: []
    }
  },
  methods: {
    // 将ajax返回的数据处理成echarts使用的数据
    processData() {
      // console.log(this.stu)
      this.stu.forEach(item => {
        let i = this.pie.findIndex(v => v.name === item.province)
        if (i > -1) {
          this.pie[i].value += 1
        } else {
          this.pie.push({ name: item.province, value: 1 })
        }
      })
    },
    draw() {
      // 实现echarts绘图
      var chartDom = this.$refs.pie
      var myChart = this.echarts.init(chartDom)
      let option = {
        // 标题
        title: {
          text: '籍贯 Hometown',
          textStyle: {
            color: '#6d767e'
          }
        },
        // 鼠标移入的提示
        tooltip: {
          // 自定义提示内容
          // {a} series[].name
          // {b} series[].data[].name
          // {c} series[].data[].value
          // {d} 占比
          formatter: '{a}<br />{b} <strong>{c}</strong>人 占比{d}%'
        },
        // 系列数据
        series: [
          {
            name: '各地人员分布',
            type: 'pie', // pie表示饼图；
            radius: ['10%', '60%'], // 半径
            center: ['50%', '50%'], // 中心点坐标
            // roseType 表示扇形区域如何展示数据，可选值有area、radius
            // area 表示使用扇形的半径表示数据的大小；每个扇形的圆心角相同
            // radius 表示使用扇形的半径表示数据的大小；使用圆心角表示占比
            roseType: 'area',
            // itemStyle 表示每一项的样式
            itemStyle: {
              borderRadius: 6 // 扇形圆角设置
            },
            // data表示的是数据部分
            data: this.pie
          }
        ]
      }
      option && myChart.setOption(option)
    }
  },
  // mounted，表示页面已经渲染完毕，此次可以找到页面元素
  // mounted里面也得不到数据，因为Ajax请求是异步的，当mounted执行的时候，Ajax还没有完成呢
  // 应该使用侦听器，还侦听 stu （stu默认是[]  === ajax请求后 ===> [xxxx]）
  watch: {
    // stu() {
    //   this.processData()
    // }
    stu: {
      handler() {
        this.processData() // 先把数据处理好，转存到 data 中
        this.draw() // 创建图表
      },
      // immediate: true, // 第一次刷新，马上侦听一次
      deep: true // 侦听对象属性的变化
    }
  }
}
</script>

<style lang="less">
.pie {
  background-color: pink;
}
</style>
